<template>
	<view>
		<view class="box" style="">

			<!-- 头部 -->
			<publicHeader></publicHeader>

			<view class="page_main">

				<view class="pt32 pb32 pl30 pr30">
					<view class="swiper_box">
						<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000">
							<swiper-item v-for="item,index in bannerList" :key="index">
								<view class="swiper-item">
									<a :href="item.linkUrl">
										<image :src="item.banner" class="swiper_img"></image>
									</a>

								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="mt45 fs32 lh40 fwb cor_000 tac">Exhibitor List</view>

					<publicNav :navindex="2"></publicNav>

					<view class="mt32 df aic jcsb">
						<view class="on ex_tags_1" @click="showEmailPopup">SEND LIST TO MYSELF</view>
						<!--generatePDF-->
						<!-- <view class="on ex_tags_1">CLEAR MY LIST</view> -->
					</view>
				</view>

				<view class="re">
					<view class="content_box">
						<view class="sw_page_list">
							<view :class="listForm.collectType == 2 ? 'item_sw on' : 'item_sw'" @click="setT(2)">
								EXHIBITORS</view>
							<view :class="listForm.collectType == 3 ? 'item_sw on' : 'item_sw'" @click="setT(3)">
								PRODUCTS</view>
						</view>

						<view id="your-dom-element">
							<view id="exhibition" class="re" v-if="listForm.collectType == 2">
								<view>
									<view class="mt32" v-for="(item, index) in zsList" :key="index">
										<view class="fs28 lh36 fwb cor_000"
											v-if="item.showroom && item.showroom  != 'undefined'">HALL
											{{item.showroom && item.showroom  != 'undefined' ? item.showroom : ''}}
										</view>

										<!-- 	<view class="mt10 fs24 lh32 cor_000">{{item.child.length}} Exhibitor are added to
											MyList from Hall {{item.showroom}}
										</view> -->
										<view v-for="foo,bar in item.child" :key="bar">
											<view class="mt24 ex_card_box">
												<view class="flex_box">
													<view class="re mr20">
														<view class="card_img">
															<image
																:src="foo.logo + '?x-oss-process=image/auto-orient,1/resize,m_lfit,w_350/quality,q_90'"
																style="width: 320rpx;height: 195rpx;" class="img_size"
																mode="aspectFit"></image>
														</view>
													</view>
													<view class="item ov">
														<view class="pr25">
															<view class="fs28 lh36 fwb cor_000 clamp_2"
																min-height="72rpx">
																{{foo.enName}}
															</view>
															<view class="pt15 pb15 bb5">
																<view class="fs24 lh32 cor_000">
																	<text class="fwb">SECTORS : </text>
																	<text v-if="foo.companyType == 1">COSMETICS</text>
																	<text v-if="foo.companyType == 3">PROFESSIONAL
																		BEAUTY</text>
																	<text v-if="foo.companyType == 2">SUPPLY
																		CHAIN</text>
																	<text v-if="foo.companyType == 4">SERVICES</text>
																</view>
															</view>

															<view class="pt15 pb15 bb5" v-if="foo.categoryEhName">
																<view class="fs24 lh32 cor_000">
																	<text class="fwb">CATEGORIES : </text>
																	<text class="">{{foo.categoryEhName}}</text>
																</view>
															</view>

															<view class="pt15 pb15 bb5">
																<view class="fs24 lh32 cor_000">
																	<text class="fwb">Country/Region : </text>
																	<text class="">{{foo.areaEnName}}</text>
																</view>
															</view>
															<view class="pt15 pb15 bb5">
																<view class="fs24 lh32 cor_A90">
																	<text class="fwb">HALL : </text>
																	<text class="">{{foo.showroom}}</text>
																</view>
															</view>
															<view class="pt15 pb15 bb5">
																<view class="fs24 lh32 cor_A90">
																	<text class="fwb">STAND NO. : </text>
																	<text class="">{{foo.boothNumber}}</text>
																</view>
															</view>

														</view>
													</view>
												</view>
												<image
													:src="foo.is_delete ? '../../static/icon_checkbox_2.png' : '../../static/icon_checkbox_1.png'"
													class="card_checkbox_pos"
													@click="handleExhibitionCheckbox(foo.id);">
												</image>
											</view>
										</view>

									</view>


								</view>

								<view v-if="zsList.length === 0">
									<u-empty text="NO DATA" mode="list"
										icon="http://cdn.uviewui.com/uview/empty/list.png">
									</u-empty>
								</view>

							</view>

							<view id="product" class="re" v-if="listForm.collectType == 3">
								<view>
									<view class="mt32" v-for="(item, index) in cp" :key="index">

										<view class="mt24 ex_card_box">
											<view class="flex_box">
												<view class="re mr20">
													<view class="card_img">
														<image
															:src="item.picture + '?x-oss-process=image/auto-orient,1/resize,m_lfit,w_350/quality,q_90'"
															style="width: 320rpx;height: 195rpx;" class="img_size"
															mode="aspectFit"></image>
													</view>
												</view>
												<view class="item ov">
													<view class="pr25">
														<view class="fs28 lh36 fwb cor_000 clamp_2" min-height="72rpx">
															{{item.zhName}}
														</view>
													</view>
													<view class="pt15 pb15 bb5">
														<view class="fs24 lh32 cor_000">
															<text class="fwb">SECTORS : </text>
															<text v-if="item.type == 1">COSMETICS</text>
															<text v-if="item.type == 3">PROFESSIONAL BEAUTY</text>
															<text v-if="item.type == 2">SUPPLY CHAIN</text>
															<text v-if="item.type == 4">SERVICES</text>
														</view>

													</view>

													<view class="pt15 pb15 bb5" v-if="item.brandZhName">
														<view class="fs24 lh32 cor_A90">
															<text class="fwb">BRAND : </text>
															<text class="">{{item.brandEnName }}</text>
														</view>
													</view>

													<view class="pt15 pb15 bb5" v-if="item.companyZhName">
														<view class="fs24 lh32 cor_A90">
															<text class="fwb">COMPANY : </text>
															<text class="">{{item.companyEnName }}</text>
														</view>
													</view>

													<view class="pt15 pb15 bb5" v-if="item.areaEnName">
														<view class="fs24 lh32 cor_A90">
															<text class="fwb">REGION/AREA : </text>
															<text class="">{{item.areaEnName }}</text>
														</view>
													</view>

													<view class="pt15 pb15 bb5" v-if="item.categoryEnglishName">
														<view class="fs24 lh32 cor_A90">
															<text class="fwb">CATEGORY : </text>
															<text class="">{{item.categoryEnglishName }}
															</text>
														</view>
													</view>
												</view>


												<image
													:src="item.is_delete ? '../../static/icon_checkbox_2.png' : '../../static/icon_checkbox_1.png'"
													class="card_checkbox_pos" @click="handleProductCheckbox(item.id)">
												</image>
											</view>

										</view>
									</view>
								</view>


								<view v-if="cp.length === 0">
									<u-empty text="NO DATA" mode="list"
										icon="http://cdn.uviewui.com/uview/empty/list.png">
									</u-empty>
								</view>

							</view>




						</view>
						<view class="mt32 df aic jcsb">
							<view class="on ex_tags_1" @click="handleAll(1)">Select ALL</view>
							<view class="on ex_tags_1" @click="deleteSelect(0)">Delete Selected
								Items</view>
						</view>


					</view>
				</view>



				<!-- 		<image src="../../static/ic_bg_1.png" class="page_bg_pos_1"></image> -->
			</view>

		</view>

		<!-- 自定义弹窗 -->
		<view v-if="showPopup" class="custom-popup" @click.stop>
			<view class="popup-content" @click.stop.prevent>
				<view class="popup-header">
					<text>SEND LIST TO YOUR EMAIL</text>
					<image src="../../static/icon_close.png" style="width: 40rpx;height: 40rpx;" @click="closePopup">
					</image>
					<!-- 	<button @click="closePopup" class="close-btn">×</button> -->
				</view>
				<view class="popup-body">

					<view class="description">
						When you submit this form, we will send you an email with the details
						saved in your list. We'll keep your information safe and handle it only in accordance with our
						Privacy Policy would like share my email with any companies l have added to my list.
					</view>
					<br />
					<view class="input-group">
						<!-- 			<input type="email" v-model="email" @input="handleEmailInput" placeholder=""
							class="email-input" /> -->
						<u-input v-model="emailForm.email" type="text" placeholder="Enter Email Address" />
					</view>
					<br />
					<view class="input-group flex_box">
						<u-input v-model="emailForm.code" type="text" placeholder="Enter Verification Code" />
						<image :src="captchaImgUrl" mode="aspectFit" class="captcha-img ml10" @click="refreshCaptcha" />
					</view>
				</view>
				<br />
				<view class="popup-footer">
					<button @click="generatePDF()" class="confirm-btn">SEND</button>
				</view>
			</view>
		</view>

		<!-- footer -->
		<publicFooter></publicFooter>




	</view>
</template>

<script>
	import {

		getEnExhibitorAdvertApi,
		getImageCodeApi,
		sendListEmailApi
	} from '@/http/api.js'
	import likeMixin from '@/cache/likeMixin';
	import html2Canvas from 'html2canvas';
	import imageCompression from 'browser-image-compression';
	import jsPDF from 'jspdf';
	import {
		hideLoading,
		showLoading,
		toast
	} from '../../utils/toast';


	export default {
		mixins: [likeMixin],
		data() {

			return {
				overflow: 'auto',
				dialogVisible: false,
				zhanshangList: [],
				bannerList: [],
				modeIndex: 0,
				CatList: [],
				AreaList: [],
				options: [],
				activityList: [],
				valueThree: '',
				listForm: {
					collectType: 2
				},
				zsList: [],
				cp: [],
				componentKey: 0,
				showDeleteConfirm: false,
				showPopup: false, // 控制弹窗的显示与隐藏  

				emailForm: {
					uuid: '',
					email: '',
					code: '',
				},

				captchaImgUrl: '', // 验证码图片的 URL  
			}
		},

		onLoad() {
			this.getLists();
			this.advertGetList();
		},

		methods: {

			advertGetList() {
				getEnExhibitorAdvertApi({}).then(res => {
					this.bannerList = res.data;
				});
			},
			// 显示弹窗  
			showEmailPopup() {
				this.showPopup = true;
				this.overflow = false;
				this.loadCaptcha(); // 加载验证码图片  
			},

			// 加载验证码图片  
			loadCaptcha() {
				// 假设有一个 API 可以获取验证码图片  
				this.captchaImgUrl = '';
				getImageCodeApi({}).then(res => {
					this.captchaImgUrl = `data:image/jpeg;base64,${res.data?.image}`
					this.emailForm.uuid = res.data?.uuid

				})
			},

			// 点击验证码图片刷新验证码
			refreshCaptcha() {
				this.loadCaptcha(); // 重新加载验证码图片  
			},

			// 关闭弹窗  
			closePopup() {
				this.showPopup = false;
				this.emailForm.email = ''; // 清空邮箱输入框  
				this.emailForm.code = ''; // 清空验证码输入框  
				this.emailForm.uuid = ''; // 清空验证码输入框  
			},


			generatePDF() {
				let that = this;
				if (!this.emailForm.email.includes('@')) {
					toast('Illegal Email')
					return false;
				}
				if (!this.emailForm.uuid) {
					toast('Refresh captcha')
					return false
				}
				if (!this.emailForm.code) {
					toast('Refresh captcha')
					return false
				}
				const domElement = document.querySelector('#your-dom-element');
				html2Canvas(domElement, {
					useCORS: true,
					allowTaint: true,
					dpi: 300, //解决生产图片模糊
				}).then(canvas => {
					let contentWidth = canvas.width
					let contentHeight = canvas.height
					let pageHeight = contentWidth / 592.28 * 841.89 // 一页pdf显示html页面生成的canvas高度;
					let leftHeight = contentHeight //未生成pdf的html页面高度
					let position = 0 //pdf页面偏移
					//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
					let imgWidth = 595.28
					let imgHeight = 592.28 / contentWidth * contentHeight
					let pageData = canvas.toDataURL('image/jpeg', 0.2)
					let PDF = new jsPDF('', 'pt', 'a4')
					// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
					//当内容未超过pdf一页显示的范围，无需分页
					if (leftHeight < pageHeight) {
						PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
					} else {
						while (leftHeight > 0) {
							PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
							leftHeight -= pageHeight
							position -= 841.89
							if (leftHeight > 0) {
								PDF.addPage()
							}
						}
					}
					// PDF.save();
					const pdfData = PDF.output('blob');
					const blob = new Blob([pdfData], {
						type: 'application/pdf'
					});

					const url = URL.createObjectURL(blob);

					showLoading('Mail Sending..');
					sendListEmailApi(url, {
						lang: 'en',
						code: that.emailForm.code,
						uuid: that.emailForm.uuid,
						email: that.emailForm.email
					}).then(res => {

						if (res.msg === '服务器错误!') {
							uni.showModal({
								title: 'NOTICE',
								content: 'Send Fail，Please Try Again Later',
								showCancel: false,
								confirmText: 'OK'
							})
							return;
						}
						if (res.msg === '发送成功！') {

							uni.showModal({
								title: 'NOTICE',
								content: 'Email Sent.',
								showCancel: false,
								confirmText: 'OK'
							})
							that.showPopup = false;
						} else if (res.msg === '邮箱非法') {
							uni.showModal({
								title: 'NOTICE',
								content: 'Email is illegal',
								showCancel: false,
								confirmText: 'OK'
							})
						} else if (res.msg === '验证码不正确！') {
							uni.showModal({
								title: 'NOTICE',
								content: 'Verification Code is wrong. \n Please re-enter.',
								showCancel: false,
								confirmText: 'OK',
								success() {
									that.emailForm.code = '';
									that.emailForm.uuid = '';
									that.refreshCaptcha();
								}
							})
						}
						hideLoading()
					}).catch(() => {
						hideLoading()
					})

				})

				// // 获取需要转换为PDF的DOM元素  
				// const domElement = document.querySelector('#your-dom-element');
				// html2Canvas(domElement, {
				// 	useCORS: true,
				// 	allowTaint: true,
				// 	dpi: 300, //解决生产图片模糊
				// }).then(canvas => {
				// 	// 从 canvas 中获取图片数据
				// 	showLoading('Generating..');
				// 	const dataURL = canvas.toDataURL('image/png');
				// 	// 将 DataURL 转换为 Blob 对象  
				// 	const blobToDataURL = (blob, callback) => {
				// 		const reader = new FileReader();
				// 		reader.onloadend = () => callback(reader.result);
				// 		reader.readAsDataURL(blob);
				// 	};

				// 	const dataURLtoBlob = (dataurl) => {
				// 		const arr = dataurl.split(','),
				// 			mime = arr[0].match(/:(.*?);/)[1],
				// 			bstr = atob(arr[1]);
				// 		let n = bstr.length;
				// 		let u8arr = new Uint8Array(n);
				// 		while (n--) {
				// 			u8arr[n] = bstr.charCodeAt(n);
				// 		}
				// 		return new Blob([u8arr], {
				// 			type: mime
				// 		});
				// 	};

				// 	const blob = dataURLtoBlob(dataURL);

				// 	// 配置压缩选项  
				// 	const options = {
				// 		maxSizeMB: 6, // 最大文件大小（单位：MB），设置为你希望的压缩后大小  
				// 		useWebWorker: true, // 使用 Web Worker 进行后台压缩，避免阻塞 UI 线程  
				// 		maxWidthOrHeight: 1920, // 压缩后的最大宽度或高度，设置为你希望的尺寸  
				// 		quality: 0.8 // 输出图片的质量，范围从 0 到 1  
				// 	};

				// 	// 进行图片压缩  
				// 	showLoading('Compression..');
				// 	imageCompression(blob, options)
				// 		.then(compressedBlob => {
				// 			console.log(compressedBlob, 'compressedBlob')
				// 			// 压缩后的 Blob 对象，可以转换为 DataURL 或直接用于下载等操作  
				// 			const compressedDataURL = URL.createObjectURL(compressedBlob);

				// 			const pdf = new JsPDF();
				// 			const width = pdf.internal.pageSize.getWidth();
				// 			const height = (canvas.height * width) / canvas.width;
				// 			pdf.addImage(compressedDataURL, 'PNG', 0, 0, width, height);
				// 			const pdfData = pdf.output();
				// 			//pdf.save();
				// 			const blob = new Blob([pdfData], {
				// 				type: 'application/pdf'
				// 			});

				// 			const url = URL.createObjectURL(blob);
				// 			console.log(url, 'blob url')
				// 			showLoading('Mail Sending..');
				// 			sendListEmailApi(url, {
				// 				lang: 'en',
				// 				code: that.emailForm.code,
				// 				uuid: that.emailForm.uuid,
				// 				email: that.emailForm.email
				// 			}).then(res => {
				// 				if (res.msg === '服务器错误!') {
				// 					uni.showModal({
				// 						title: 'NOTICE',
				// 						content: 'Send Fail，Please Try Again Later',
				// 						showCancel: false,
				// 						confirmText: 'OK'
				// 					})
				// 					return;
				// 				}
				// 				if (res.msg === '发送成功') {
				// 					toast('Email Sent.')
				// 					that.showPopup = false;
				// 				} else if (res.msg === '邮箱非法') {
				// 					uni.showModal({
				// 						title: 'NOTICE',
				// 						content: 'Email is illegal',
				// 						showCancel: false,
				// 						confirmText: 'OK'
				// 					})
				// 				} else if (res.msg === '验证码不正确！') {
				// 					uni.showModal({
				// 						title: 'NOTICE',
				// 						content: 'Verification Code is wrong. \n Please re-enter.',
				// 						showCancel: false,
				// 						confirmText: 'OK',
				// 						success() {
				// 							that.emailForm.code = '';
				// 							that.emailForm.uuid = '';
				// 							that.refreshCaptcha();
				// 						}
				// 					})
				// 				}
				// 				hideLoading()
				// 			}).catch(() => {
				// 				hideLoading()
				// 			})


				// 		})
				// 		.catch(error => {
				// 			console.error('图片压缩失败:', error);
				// 		});

				// });
			},
			deleteItem(isDlete, index) {
				this.cp[index].is_delete = isDlete;
				this.componentKey += 1;
				// console.log(isDlete,index)
			},

			setT(t) {
				this.listForm.collectType = t;
				// this.searchList();
				// if (t == 2) {
				// 	uni.navigateTo({
				// 		url: '/pages/my_list/exhibitors_list'
				// 	})
				// } else if (t == 3) {
				// 	uni.navigateTo({
				// 		url: '/pages/my_list/products_list'
				// 	})
				// }
			},


			getLists() {
				let zs = this.getZSList();
				zs.forEach(item => {
					let p = item.logo?.split(",") || [];
					item.logo = p[0] || '';
					item.is_delete = 0;

				})
				this.cp = this.getCPList();
				this.cp.forEach(item => {
					let p = item.picture?.split(",") || [];
					item.picture = p[0] || '';
					item.is_delete = 0;
					item.zhName = item.zhName.toUpperCase()
				})
				this.zsList = this.transformObjToObj2(zs);

				console.log(this.cp, 'this.cp')
				console.log(this.zsList, 'this.zsList')
			},

			transformObjToObj2(objArray) {
				const groupedByType = {};
				objArray.forEach(item => {
					if (!groupedByType[item.showroom]) {
						groupedByType[item.showroom] = [];
					}
					groupedByType[item.showroom].push(item);
				});
				return Object.keys(groupedByType).map(showroom => ({
					showroom: showroom, // 将字符串类型的type转换为数字
					child: groupedByType[showroom]
				}));
			},




			deleteSelect() {
				let that = this;
				let ids = [];
				if (this.listForm.collectType == 2) {
					this.zsList.forEach(i => {
						i.child.forEach(item => {
							if (item.is_delete == 1) {
								ids.push(item.id)
							}
						})
					})
				} else {
					this.cp.forEach(item => {
						if (item.is_delete == 1) {
							ids.push(item.id)
						}
					})
				}

				if (ids.length <= 0) {
					// this.$message.error("")
					return false;
				}

				uni.showModal({
					title: 'WARNING',
					content: 'Are you sure you want to delete the selected?',
					confirmText: 'CONFIRM',
					cancelText: 'CANCLE',
					success: function(res) {
						if (res.confirm) {
							// 用户点击了确认按钮，执行删除操作  
							// 在这里编写你的删除逻辑代码  
							console.log('用户点击了确认按钮');
							that.loading = true;
							if (that.listForm.collectType == 2) {
								that.zsDelete(ids);
							} else {
								that.cpDelete(ids);
							}
							window.location.reload();
						} else if (res.cancel) {
							// 用户点击了取消按钮，不执行删除操作  
							console.log('用户点击了取消按钮');
						}
					}
				});




			},


			handleAll(flag) {
				if (this.listForm.collectType == 2) {
					this.zsList.forEach((item, index) => {
						item.child.forEach((i, k) => {
							i.is_delete = flag;
						})
						console.log(1);
					});
				} else {
					this.cp.forEach((item, index) => {
						item.is_delete = flag;
						this.cp[index].is_delete = flag;
					});
				}

				this.componentKey += 1;
			},

			handleCurrentChange(page) {
				this.listForm.currentPage = page;
				this.getLists();
			},


			handleMode(index) {
				this.modeIndex = index;
			},



			handleExhibitionCheckbox(id) {
				this.zsList.forEach((item, index) => {
					item.child.forEach((i, k) => {
						if (id == i.id) {
							i.is_delete = i.is_delete == 1 ? 0 : 1;
						}
					})
				})
			},


			handleProductCheckbox(id) {
				let that = this;
				let cp = this.cp;
				cp.forEach((item, index) => {
					if (item.id == id) {
						cp[index].is_delete = item.is_delete == 1 ? 0 : 1;
					}
				})
				this.cp = JSON.parse(JSON.stringify(this.cp))

			}
		}
	}
</script>

<style>
	.swiper_box {
		position: relative;
		width: 100%;
		height: 184rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.swiper_box .swiper_img {
		position: relative;
		width: 100%;
		height: 184rpx;
	}

	.ex_tags_1 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 330rpx;
		height: 76rpx;
		font-size: 28rpx;
		line-height: 36rpx;
		font-weight: bold;
		border-radius: 8rpx;
		border: 2rpx solid #CCCCCC;
	}

	.on.ex_tags_1 {
		color: #fff;
		background: #A90000;
		border-color: #A90000;
	}

	.page_bg_pos_1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 600rpx;
		z-index: 1;
	}

	.content_box {
		position: relative;
		padding: 32rpx 30rpx;
		z-index: 2;
	}

	.sw_page_list {
		position: relative;
		display: flex;
		width: 462rpx;
		height: 60rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 8rpx;
	}

	.sw_page_list .item_sw {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		background: #fff;
	}

	.sw_page_list .item_sw.on {
		color: #fff;
		background: #000;
	}

	.sw_page_list .item_sw:nth-child(1) {
		border-radius: 8rpx 0 0 8rpx;
	}

	.sw_page_list .item_sw:nth-child(2) {
		border-radius: 0 8rpx 8rpx 0;
	}

	.ex_card_box {
		position: relative;
		padding: 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 16rpx;
		border: 2rpx solid #EEEEEE;
	}

	.ex_card_box .card_img {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 252rpx;
		height: 200rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		background: #fff;
	}

	.ex_card_box .card_img .img_size {
		position: relative;
	}

	.card_checkbox_pos {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}

	.custom-modal {
		z-index: 9999;
		position: absolute;
		top: 400rpx;
		left: 200rpx;
	}

	/* 弹窗遮罩层 */
	.custom-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明黑色背景 */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	/* 弹窗内容 */
	.popup-content {

		width: 650rpx;

		background-color: #fff;
		/* 白色背景 */
		border-radius: 10px;
		/* 圆角边框 */
		overflow: hidden;
		/* 隐藏超出内容 */
		padding: 20px;
		/* 内边距 */
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
	}

	/* 弹窗标题与关闭按钮 */
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		/* 与内容之间的间距 */
	}

	.close-btn {
		font-size: 20px;
		/* 字号 */
		color: #999;
		/* 灰色文字 */
		cursor: pointer;
		/* 鼠标悬停效果 */
	}

	/* 文字说明 */
	.description {
		font-size: 14px;
		/* 字号 */
		color: #666;
		/* 灰色文字 */
		margin-bottom: 15px;
		/* 与输入框之间的间距 */
	}

	/* 输入框样式 */
	.input-group input {
		width: 100%;
		/* 宽度占满 */
		padding: 10px;
		/* 内边距 */
		border: 1px solid #ccc;
		/* 边框 */
		border-radius: 5px;
		/* 圆角 */
		box-sizing: border-box;
		/* 包含内边距和边框 */
		margin-bottom: 10px;
		/* 输入框之间的间距 */
	}

	/* 验证码图片与输入框 */
	.captcha-img {
		width: 100px;
		/* 图片宽度 */
		height: 40px;
		/* 图片高度 */
		margin-right: 10px;
		/* 与验证码输入框之间的间距 */
		cursor: pointer;
		/* 鼠标悬停效果 */
	}

	/* 提交按钮 */
	.confirm-btn {
		background-color: #A90000;
		/* 蓝色背景 */
		color: #fff;
		/* 白色文字 */
		border: none;
		/* 无边框 */
		padding: 10px 20
	}
</style>